<template>
<div class="page" data-name="sobill-query">
	<div class="navbar">
		<div class="navbar-inner sliding">
			<div class="left">
				<a href="#" class="link back"> <i class="icon icon-back"></i> <span
					class="ios-only">返回</span>
				</a>
			</div>
			<div class="title">客户资料查询</div>
		</div>
	</div>
	<div class="page-content">
		<form>
			<div class="list inline-labels no-hairlines">
				<ul>
					<li><div class="item-content item-input">
							<div class="item-inner">
								<div class="item-title item-label">客户分类</div>
								<div class="item-input-wrap">
									<a class="item-link item-content" href="#"
										id="popupCustomerCategory">
										<div class="item-inner">
											<input type="hidden" name="categroyId" id="editCategoryId">
											<div class="item-title" id="editCategoryName"></div>
											<div class="item-after"></div>
										</div>
									</a>
								</div>
							</div>
						</div></li>
					<li><div class="item-content item-input">
							<div class="item-inner">
								<div class="item-title item-label">客户编码</div>
								<div class="item-input-wrap">
									<input type="text" name="code" id="editCode"><span
										class="input-clear-button"></span>
								</div>
							</div>
						</div></li>
					<li><div class="item-content item-input">
							<div class="item-inner">
								<div class="item-title item-label">客户名称</div>
								<div class="item-input-wrap">
									<input type="text" name="name" id="editName"><span
										class="input-clear-button"></span>
								</div>
							</div>
						</div></li>
					<li><div class="item-content item-input">
							<div class="item-inner">
								<div class="item-title item-label">地址</div>
								<div class="item-input-wrap">
									<input type="text" name="address" id="editAddress"><span
										class="input-clear-button"></span>
								</div>
							</div>
						</div></li>
					<li><div class="item-content item-input">
							<div class="item-inner">
								<div class="item-title item-label">联系人</div>
								<div class="item-input-wrap">
									<input type="text" name="contact" id="editContact"><span
										class="input-clear-button"></span>
								</div>
							</div>
						</div></li>
					<li><div class="item-content item-input">
							<div class="item-inner">
								<div class="item-title item-label">手机</div>
								<div class="item-input-wrap">
									<input type="text" name="mobile" id="editMobile"><span
										class="input-clear-button"></span>
								</div>
							</div>
						</div></li>
					<li><div class="item-content item-input">
							<div class="item-inner">
								<div class="item-title item-label">固话</div>
								<div class="item-input-wrap">
									<input type="text" name="tel" id="editTel"><span
										class="input-clear-button"></span>
								</div>
							</div>
						</div></li>
					<li><div class="item-content item-input">
							<div class="item-inner">
								<div class="item-title item-label">QQ</div>
								<div class="item-input-wrap">
									<input type="text" name="qq" id="editQQ"><span
										class="input-clear-button"></span>
								</div>
							</div>
						</div></li>
				</ul>
			</div>
		</form>

		<div class="block">
			<div class="row">
				<div class="col-50">
					<button class="col button button-fill" id="buttonClear" href="#">重置查询条件</button>
				</div>
				<div class="col-50">
					<button class="col button button-fill" id="buttonQuery" href="#">查询</button>
				</div>
			</div>
		</div>
	</div>
</div>
</template>

<script>
	return {
		methods : {},
		data : function() {
			return {};
		},
		on : {
			pageInit : function(e, page) {
				var app = page.app;

				var $$ = Dom7;

				app.autocomplete.create({
					openIn : 'page',
					openerEl : '#popupCustomerCategory',
					closeOnSelect : true,
					searchbarPlaceholder : "*或?可以显示全部分类",
					valueProperty : 'id',
					textProperty : 'name',
					preloader : true,
					source : function(query, render) {
						var me = this;
						var results = [];
						if (query.length === 0) {
							render(results);
							return;
						}

						me.preloaderShow();

						var url = app.data.PSI.baseURI
								+ "H5/Customer/queryCustomerCategory";

						app.request({
							url : url,
							method : 'POST',
							dataType : 'json',
							data : {
								query : query,
							},
							success : function(data) {
								me.preloaderHide();
								render(data);
							}
						});
					},
					on : {
						change : function(value) {
							var v = value[0];
							$$("#editCategoryId").val(v.id);
							$$("#editCategoryName").text(v.name);
						}
					}
				});

				$$("#buttonQuery").on(
						"click",
						function() {
							var ctx = {
								categoryId : $$("#editCategoryId").val(),
								code : $$("#editCode").val(),
								name : $$("#editName").val(),
								addres : $$("#editAddress").val(),
								contact : $$("#editContact").val(),
								mobile : $$("#editMobile").val(),
								tel : $$("#editTel").val(),
								qq : $$("#editQQ").val(),
								currentPage : 1
							};
							var url = "/customerList/"
									+ app.utils.serializeObject(ctx);
							page.router.navigate(url, {
								context : ctx
							});
						});

				$$("#buttonClear").on("click", function() {
					$$("#editCategoryId").val("");
					$$("#editCategoryName").text("");
					$$("#editCode").val("");
					$$("#editName").val("");
					$$("#editAddress").val("");
					$$("#editContact").val("");
					$$("#editMobile").val("");
					$$("#editTel").val("");
					$$("#editQQ").val("");
				});
			}
		}
	};
</script>

